<!-- 标签导航栏 -->
<template>
  <!-- 左边:标签导航栏 -->
  <!-- fixed 固定位置 高度44 距离顶部64这个个高度和 AdminHeader 组件高度一致,水平间距为px-2 右边距0 垂直高度 z-50 方向通过 flex items-center 设置水平布局 且内容居中,白色背景-->
  <!-- 另外单独通过style 设置了左边距250px 这个宽度是左边菜单栏的宽度 -->
  <!-- :style 为导航栏动态设置了 left 值，同时添加了 transition-all duration-300 shadow Tailwind CSS 样式，为其添加了过渡动画，以及阴影效果 -->
  <div class="fixed top-[64px] h-[44px] px-2 right-0 z-50 flex items-center bg-white transition-all duration-300 shadow" :style="{left: menuStore.menuWidth}">
    <el-tabs v-model="activeTab" type="card" class="demo-tabs" closable @tab-remove="removeTab" @tab-change="tabChange" style="min-width: 10px">
      <!-- 标签是否可以关闭,只有当前标签不是/admin/index 才可以关闭 -->
      <el-tab-pane v-for="item in tabList" :key="item.path" :label="item.title" :name="item.path" :closable="item.path !== '/admin/index'">

      </el-tab-pane>
    </el-tabs>

    <!-- 右侧下拉菜单 -->
    <span class="ml-auto flex items-center justify-center h-[32px] w-[32px]">
      <el-dropdown @command="handleCloseTab">
        <span class="el-dropdown-link">
        <el-icon>
          <arrow-down/>
        </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="closeOthers">关闭其他</el-dropdown-item>
            <el-dropdown-item command="closeAll">关闭全部</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </span>
  </div>
  <!-- 如果不加入这个,页面文字被导航栏fixed布局和白色背景遮盖了-->
  <!-- 在div下面在放置一个高度为44px的容器,没有任何内容,就是为了把隐藏的内容顶下去-->
  <div class="h-[44px]"></div>
</template>

<script setup>
import { useTabList } from "@/composables/useTagList.js";

const { menuStore, activeTab, tabList, tabChange, removeTab, handleCloseTab } = useTabList()
</script>

<style>
.el-tabs__item {
  font-size: 12px;
  border: 1px solid #d8dce5!important;
  border-radius: 3px!important;
}

.el-tabs--card>.el-tabs__header .el-tabs__item {
  margin-left: 0.1rem!important;
  margin-right: 0.1rem!important;
}

.el-tabs__item.is-active {
  background-color: var(--el-color-primary)!important;
  color: #fff;
}

.el-tabs__item.is-active::before {
  content: "";
  background-color: #fff;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
  margin-right: 4px;
}

.el-tabs {
  height: 32px;
}

.el-tabs__header {
  margin-bottom: 0;
}

.el-tabs--card>.el-tabs__header .el-tabs__nav {
  border: 0;
}

.el-tabs--card>.el-tabs__header .el-tabs__item {
  height: 32px;
  line-height: 32px;
  border: 0;
  background: #fff;
}

.el-tabs--card>.el-tabs__header {
  border: 0;
}

.el-tabs__nav-prev, .el-tabs__nav-next {
  line-height: 35px;
}

.is-disabled {
  cursor: not-allowed;
  color: #d1d5db;
}

</style>